<template>
  <h2>添加会员等级</h2>
  <table class="table-bordered" border="1">
    <tr>
      <td>会员等级名称:</td>
      <td>
        <input type="text" placeholder="请输入会员等级名称"  v-model="Rank.rank_Name"/>
      </td>
    </tr>
    <tr>
      <td>会员等级状态:</td>
      <td>
        <input type="radio" name="state" :value="true"  v-model="Rank.rank_State" />启用
        <input type="radio" name="state" :value="false"  v-model="Rank.rank_State" />禁用
      </td>
    </tr>
    <tr>
      <td>最小成长值:</td>
      <td>
        <input type="text" placeholder="请输入最小成长值" v-model="Rank.rank_MinPoint" />
      </td>
    </tr>
    <tr>
      <td>最大成长值:</td>
      <td>
        <input type="text" placeholder="请输入最大成长值" v-model="Rank.rank_MaxPoint"  />
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" class="btn btn-primary" value="修改会员等级信息" @click="UpMemberType"/>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import axios from "axios";

// 引入路由组件  useRoute:路由操作 useRouter:路由跳转
import {useRoute,useRouter} from 'vue-router'


// 创建路由操作函数
const route = useRoute()
// 获取路由跳转函数
const router=useRouter();
// 创建响应式数据
const Rank = ref({
  rank_Id: 0,
  rank_Name: "",
  rank_State: true,
  rank_MinPoint: 0,
  rank_MaxPoint: 0,
});


// 生命周期
onMounted(() => {
    UpSqlMemberRank();
})

// 反填
const UpSqlMemberRank = () => {
    axios.get('https://localhost:7071/api/MemberRank/UpSqlMemberRank', {
        params: {
        id:route.params.id,
        }
    })
        .then(res => {
            console.log(res.data);
        Rank.value=res.data;
        })
    .catch(err => {
        console.log(err);
    })
}


const UpMemberType = () => {
  axios.put('https://localhost:7071https://localhost:7071/', Rank.value)
    .then(res => {
      if (res.data > 0) {
        console.log(res.data);
        alert('修改成功');
        router.push('/ShowMemberRankView');
      }
      else {
           alert('修改失败');
    }
  })
}

</script>

<style scoped>
</style>